<div class="fichevitrine_module">

    <link rel="stylesheet" href="{$modules_dir}fichevitrine/css/common.css" type="text/css"/>
    <link rel="stylesheet" href="{$modules_dir}fichevitrine/css/editor.css" type="text/css"/>

    <div>
		<h1>{l s="Mon espace fiche vitrine" mod='fichevitrine'}</h1> 
		<table class="vitrinemenu">
			<tr>
				<td><a href="{$linkHome}">{l s="Accueil" mod='fichevitrine'}</a></td>
				<td><a href="{$linkAddModel}">{l s="Créer un modèle" mod='fichevitrine'}</a></td>
				<td><a href="{$linkListModel}">{l s="Accéder à mes modèles" mod='fichevitrine'}</a></td>
				<td><a href="{$linkAddFiche}" class="menuSelected">{l s="Créer une fiche" mod='fichevitrine'}</a></td>
				<td><a href="{$linkListFiche}">{l s="Accéder à mes fiches" mod='fichevitrine'}</a></td>
				<td><a href="{$linkPrint}">{l s='Imprimer' mod='fichevitrine'}</a></td>
				<td><a href="{$manual}">{l s='Manuel' mod='fichevitrine'}</a></td>
			</tr>
		</table>
    </div>

    <div id="editor">
		<p id="trick">
		{l s='Astuce : Vous pouvez aussi définir les extra-notes (loué/vendu) dans le modèle afin de garantir une homogénéïté sur la police, la taille du texte, la couleur, la position,...  qui sera alors identique pour toutes les fiches.' mod='fichevitrine'}
		</p>
        <table class="editorMenu">
            <tr>						
                <td>
                    <label>{l s="Nom"} : </label>
                    <input type="text" id="ficheTitle" value="{$fiche->name}" />
                </td>
				<td>
                    <label>{l s="Type de bien" mod='fichevitrine'} : </label>
					<select name="goodType" id="goodType">
                        {foreach from=$goodTypes key=value item=goodType}
                            <option value="{$goodType->id_prop}" {if $fiche->propId == $goodType->id_prop}selected="selected"{/if}>
                                {$goodType->getName()}
                            </option>
                        {/foreach}
					</select>
                </td>
				<td>
					<label for="rent">{l s="Location/Vente" mod='fichevitrine'}</label>
					<select name="rent" id="rent">
						<option value="1" {if $fiche->rent == 1}selected="selected"{/if}>{l s="Location" mod='fichevitrine'}</option>
						<option value="0" {if $fiche->rent == 0}selected="selected"{/if}>{l s="Vente" mod='fichevitrine'}</option>
					</select>
				</td>
                <td>
                    <label>{l s="Portrait" mod='fichevitrine'}</label>
                    <input 	type="radio" 
                            name="ficheOrientation" 
                            id="portraitBtn" 
                            value="{$portrait}" 
                            {if $fiche->orientation == $portrait}checked="checked"{/if}/> 
                </td>
                <td>
                    <label>{l s="Paysage" mod='fichevitrine'}</label>
                    <input 	type="radio" 
                            name="ficheOrientation" 
                            id="landscapeBtn" 
                            value="{$landscape}" 
                            {if $fiche->orientation == $landscape}checked="checked"{/if}"
							/> 
                </td>
				<td>
                    <label for="theme">{l s="Thème" mod='fichevitrine'} :</label>
                    <select name="theme" id="ficheTheme">
                        <option value="-1">{l s="Tous" mod='fichevitrine'}</option>
                        {foreach from=$themes key=value item=theme}
                            <option value="{$theme->id_theme}" {if $fiche->theme == $theme->id_theme}selected="selected"{/if}>
                                {$theme->getName()}
                            </option>
                        {/foreach}
                    </select>
				</td>
				<td>
					<label for="format">{l s="Format" mod='fichevitrine'} :</label>
                    <select name="format" id="ficheFormat">
                        <option value="-1">{l s="Tous" mod='fichevitrine'}</option>
                        {foreach $formats as $key=>$value}
                            <option value="{$value}"{if $fiche->format == $value}selected="selected"{/if}>
                                {$value}
                            </option>
                        {/foreach}
                    </select>
				</td>
				<td>
					<button class="print" title="{l s='Imprimer' mod='fichevitrine'}" onclick="printFiche();"></button>
				</td>
            </tr>
        </table>
        <table class="editorMenu">
            <tr>
                <td><button id="save" title="{l s="Sauvegarder la fiche" mod='fichevitrine'}" class="saveButton"></button></td>
                <td style="padding-right: 5px; padding-left: 5px;">
                    <img 	src="{$modules_dir}fichevitrine/data/ui/ajax-loader.gif" 
                          id="loaderImg" 
                          width="100%" /> 
                </td>	
				<td><p>T</p></td>
                <td>
                    <div id="encapsuler" class="encapsuler">
                        <div id="colorPickerContainer" class="colorPickerContainer" style="z-index:30;"></div>
                    </div>
                </td>
				<td><button id="boldButton" class="boldButton"></button></td>
                <td><button id="italicButton" class="italicButton"></button></td>
                <td><button id="underlineButton" class="underlineButton"></button></td>
                <td><select id="fontButton"></select></td>
                <td><select id="sizeButton"></select></td>
                <td><button id="leftButton" class="leftButton"></button></td>
                <td><button id="centerButton" class="centerButton"></button></td>
                <td><button id="rightButton" class="rightButton"></button></td>
                <td><button id="justifyButton" class="justifyButton"></button></td>
				
				<td><button id="rentButton" class="titleButton" title="{l s='Loué' mod='fichevitrine'}">{l s='Loué' mod='fichevitrine'}</button></td>
                <td><button id="sellButton" class="titleButton" title="{l s='Vendu' mod='fichevitrine'}">{l s='Vendu' mod='fichevitrine'}</button></td>
                
				
				<td><button id="resizeX" title="{l s="Aligner avec la largeur" mod='fichevitrine'}" class="resizeXButton"></button></td>
                <td><button id="resizeY" title="{l s="Aligner avec la hauteur" mod='fichevitrine'}" class="resizeYButton"></button></td>
                <td><button id="resizeXY" title="{l s="Aligner avec la largeur et la hauteur" mod='fichevitrine'}" class="resizeXYButton"></button></td>
				
				<td>
                    <label title="{l s="Rogner à gauche" mod='fichevitrine'}" class="clipLeftButton" for="clipLeft"></label>
                    <input type="checkbox" id="clipLeft" name="clipLeft" />
                </td>				
				<td>
                    <label title="{l s="Rogner à droite" mod='fichevitrine'}" class="clipRightButton" for="clipRight"></label>
                    <input type="checkbox" id="clipRight" name="clipLeft" />
                </td>				
				<td>
                    <label title="{l s="Rogner en haut" mod='fichevitrine'}" class="clipTopButton" for="clipTop"></label>
                    <input type="checkbox" id="clipTop" name="clipTop" />
                </td>	
				<td>
                    <label title="{l s="Rogner en bas" mod='fichevitrine'}" class="clipBottomButton" for="clipBottom"></label>
                    <input type="checkbox" id="clipBottom" name="clipBottom" />
                </td>	
                
           
            </tr>
        </table>
        <table class="editorMenu2">
            <tr>		
				
                <td>
                    <label for="alphaButton">{l s="Alpha" mod='fichevitrine'}</label>
                    <input type="range" id="alphaButton" name="alphaButton" min="0" max="1" step="0.01">
                </td>
                <td>
                    <label for="contrastButton">{l s="Contraste" mod='fichevitrine'}</label>
                    <input type="range" id="contrastButton" name="contrastButton" min="0" max="20" step="1">
                </td>
                <td>
                    <label for="brightnessButton">{l s="Luminosité" mod='fichevitrine'}</label>
                    <input type="range" id="brightnessButton" name="brightnessButton" min="-255" max="255" step="1">
                </td>
            </tr>
        </table>	
		<div id="editorZone">
            <canvas id="canvasEditor" width="320" height="240" ></canvas>
        </div>
    </div>

    <script src="{$modules_dir}fichevitrine/js/tomahawk_engine.js" type="text/javascript"></script>
    <script src="{$modules_dir}fichevitrine/js/editorFiche.js" type="text/javascript"></script>

    <script type="text/javascript">

		var autoSave = {$autoSave} == 1;
		var autoSaveTime = parseInt({$autoSaveTime}) * 1000;
		var fontList = '{$fontList}';
		var data = {$fiche->data};
		var ficheId = {$fiche->id_fiche};
		var realWidth = {$width};
		var realHeight = {$height};
		var orientation = {$fiche->orientation};
		var landscapeId = {$landscape};
		var portraitId = {$portrait};
		var saveURLFiche = '{$linkSaveFiche}?';
		var saveURLImage = '{$linkSaveImage}?';
		var uiPath = '{$modules_dir}fichevitrine/data/ui/';
        var assetsPath = '{$assetsPath}';
		var fonts = fontList.split(',');
		var fontSizeMin = parseInt({$fontSizeMin});
        var i = parseInt({$fontSizeMax}) + 1;
        var element = null;
        var sizeElement = document.getElementById('sizeButton');
        var fontsElement = document.getElementById('fontButton');
		
		Localization.getInstance().addLabel("LOUE","{l s='LOUE' mod='fichevitrine'}");
		Localization.getInstance().addLabel("VENDU","{l s='VENDU' mod='fichevitrine'}");
		Localization.getInstance().addLabel("ACCROCHE","{l s='ACCROCHE' mod='fichevitrine'}");
		Localization.getInstance().addLabel("TITRE","{l s='TITRE' mod='fichevitrine'}");
		Localization.getInstance().addLabel("DETAILS","{l s='DETAILS' mod='fichevitrine'}");
		Localization.getInstance().addLabel("PRIX","{l s='PRIX' mod='fichevitrine'}");
		Localization.getInstance().addLabel("VOTRE_TEXTE_ICI","{l s='Votre texte ici' mod='fichevitrine'}");
		Localization.getInstance().addLabel("ZONE_IMAGE","{l s='Zone Image              Double-cliquez pour ajouter une image' mod='fichevitrine'}");
		
		function eraseCookie(name) 
		{
			createCookie(name,"",-1);
		}
		
		function createCookie(name,value,days) 
		{
			if (days) {
				var date = new Date();
				date.setTime(date.getTime()+(days*24*60*60*1000));
				var expires = "; expires="+date.toGMTString();
			}
			else var expires = "";
			document.cookie = name+"="+value+expires+"; path=/";
		}

		function readCookie(name) 
		{
			var nameEQ = name + "=";
			var ca = document.cookie.split(';');
			for(var i=0;i < ca.length;i++) {
				var c = ca[i];
				while (c.charAt(0)==' ') c = c.substring(1,c.length);
				if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
			}
			return null;
		}

		function printFiche()
		{
			var value = {$fiche->id_fiche};
			var ficheName = '{$fiche->name}';
			var cookie = readCookie('printList');
			var list = (cookie == null ) ? new Array() : cookie.split(',');
			var i = list.length;
			var index = -1;
			
			while( --i > -1 )
			{
				if( list[i] == value )
					index = i;
			}
			
			if( index == -1 )
			{
				list.push(value);
				list.push(ficheName);
			}
			
			createCookie('printList',list.join(','));
			window.location.href = '{$linkPrint}';
		}


        while (--i >= fontSizeMin)
        {
            element = document.createElement('option');
            element.value = i;
            element.innerText = i;
            sizeElement.appendChild(element);
        }

        i = fonts.length;

        while (--i > -1)
        {
            element = document.createElement('option');
            element.value = fonts[i];
            element.innerText = fonts[i];
            fontsElement.appendChild(element);
        }

		

        {literal}
        window.onload = function()
        {
            //TODO: retailler le canvas à la taille de la fenetre
            Tomahawk.run();

            ImageResizer.MAX_IMAGE_WIDTH = parseInt(Math.max(realWidth,realHeight));

            var editor = EditorFiche.getInstance();
			
            editor.portraitWidth = realWidth;
            editor.portraitHeight = realHeight;
            editor.portraitId = portraitId;
            editor.landscapeId = landscapeId;
            editor.assetsPath = assetsPath;
            editor.uiPath = uiPath;
            editor.saveURLFiche = saveURLFiche;
            editor.saveURLImage = saveURLImage;
            editor.ficheId = ficheId;
            editor.autoSave = autoSave;
            editor.autoSaveTime = autoSaveTime;
            editor.init(data);
            editor.changeOrientation(orientation);
        };
        {/literal}
    </script>

</div>